<template>
  <view class="main-box">
    
    <view class="img-container">
      <image
        class="topImg"
        src="../../static/images/login_bg.png"
        style="height: 650rpx; width: 750rpx"
        model="scaleToFill"
      ></image>
    </view>
    <view class="containerBody">
      <view> <u-loading-page  :loading="loading" loading-text="自动登录中..."></u-loading-page> </view>
      <u-form v-if="!loading">
        <view class="login-form">
          <div
            style="
              font-size: 36rpx;
              font-weight: bold;
              color: #666;
              margin: 40rpx 0rpx;
            "
          >
            手机号码
          </div>
          <u-form-item borderBottom style="margin-bottom: 20rpx">
            <u--input 
              style="height: 30px"
              v-model="loginForm.phone"
              border="none"
              placeholder="请输入手机号"
              maxlength="11"
              clearable
              type="number"
             @blur="phoneNumberStyle"
            ></u--input>
          </u-form-item>
          <u-form-item borderBottom>
            <view style="display: flex; width: 100%">
              <u--input
                style="height: 30px"
                v-model="loginForm.verifyCode"
                border="none"
                placeholder="请输入验证码"
                clearable
              ></u--input>
              <button
                size="mini"
                style="margin-left: 16rpx; color: #fff"
                :disabled="showBtnOn"
                @click="handleGetPhoneCode"
              >
                {{ codeBtnTxt }}
              </button>
            </view>
          </u-form-item>
      <!--    <div style="display: flex; align-items: center; margin-top: 30rpx">
            <div
              style="
                width: 26rpx;
                height: 26rpx;
                background: #2b4fa3;
                border-radius: 50%;
                margin-right: 20rpx;
              "
            ></div>
            登录代表您同意绑定微信
          </div> -->
          <view class="login-btn-box">
            <view
              class="custom-style"
              style="
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 50rpx;
                background: #f5f5f5;
                border: 1px solid #0c347e;
                color: #0c347e;
                box-shadow: none !important;
              "
            >
              <navigator target="miniProgram" open-type="exit">暂不</navigator>
            </view>
            <button
              :disabled="!loginForm.phone || !loginForm.verifyCode"
              class="custom-style"
              style="
                color: #fff;
                background: #0c347e;
                border: 1px solid #0c347e;
                box-shadow: none !important;
              "
              :loading="loginLogin"
              @click="handleLogin"
            >
              登录
            </button>
          </view>
        </view>
      </u-form>
      <view>
        <image
          class="bottomImg"
          src="../../static/images/bannerBom.png"
        ></image>
      </view>
      <view v-if="show">
        {{ message }}
      </view>
      <u-popup :show="show">
        <view>
          <text>{{ message }}</text>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import {
  login_api,
  getPhoneCode,
  verificationPhone,
  setOpenIdFun,
  updateOpenIdFun,
} from '@/service/services.js'
export default {
  computed: {},
  data() {
    return {
      openId: '',
      show: false,
      message: '',
      loginLogin: false,
      timer: 60,
      showBtnOn: false,
      myCode: null,
      codeBtnTxt: '获取验证码',
      wxUserInfo: {
        avatarUrl: '',
        city: '',
        country: '',
        gender: 0,
        language: '',
        nickName: '微信用户',
        province: '',
      },
      loginForm: {
        phone: '',
        verifyCode: null,
      },
      loading:false
    }
  },
  computed: mapState({
    roleId: (state) => {
      return state.roleId
    },
  }),
  onLoad: () => {
    wx.setVisualEffectOnCapture({
      visualEffect: 'hidden',
    })
   
    
  },
  onShow() {
  },
  mounted() {
   // uni.clearStorageSync()
      uni.getStorage({
      key: 'phoneNum',
      success: (res) => {
        this.loading=true
        this.loginForm.phone=res.data
          verificationPhone({phonenumber:this.loginForm.phone}).then((res) =>{
              if(!res.data){
                  uni.showToast({
                    title: "您无权登录系统，请联系管理员！",
                    type: 'default',
                    position: 'bottom',
                    icon: 'none',
                    position: 'center',
                    mask: true,
                    duration: 3000,
                  })
              } 
              else{
                uni.getStorage({
                  key: 'roleId',
                  success: (res) => { 
                      this.$store.state.roleId = res.data  
                      this.goPage( this.$store.state.roleId)    
                  },
                })
              } 
          }) 
        this.loading=false
      },
    })    
     uni.getStorage({
      key: 'userInfo',
      success: (res) => { 
        this.$store.state.userInfo = res.data  
      },
    }) 
  },
  methods: {
    ...mapMutations(['setRoleId', 'login', 'setUserInfo']),
    exitLogin() {
      uni.reLaunch({
        url: '/',
      })
    },
    //根据缓存的角色id，进对应的角色页面
     goPage(id){
          if (id === 4) {
            uni.redirectTo({
              url: '/pagesA/leader-daily/daily-view-detail/daily-list'   
            })
          }
         if (id === 3) {
            uni.switchTab({
              url: '/pages/secretary-daily/daily-edit-home/index',  
            })
          }
          if (id === 2) {
            uni.switchTab({
              url: '/pages/leader-daily/daily-edit-home/index',
            })
          }
          if (id === 1) {
            uni.switchTab({
              url: '/pages/summary-daily/summary-home/index',
            })
          }
     },
     async handleLogin() {
      if (!this.loginForm.phone || !this.loginForm.verifyCode) {
        uni.showToast({
          title: '请输入账号或验证码',
          type: 'default',
          position: 'bottom',
          icon: 'none',
          position: 'center',
          mask: true,
          duration: 3000,
        })
      }
      const verifPhone = await verificationPhone({
        phonenumber: this.loginForm.phone,
      })
      if (verifPhone.data) {
        this.loginLogin = true
        uni.setStorage({
          key: 'userInfo',
          data: verifPhone.data,
        })
        this.setUserInfo(verifPhone.data)
        this.setRoleId(verifPhone.data.roleId)
        this.loginLogin = false
        const loginApiData = await login_api({
          phone: this.loginForm.phone,
          verifyCode: this.loginForm.verifyCode,
        })
      
        if (loginApiData.code === 200 && loginApiData.token) {
          uni.setStorage({
            key: 'token',
            data: loginApiData.token,
            success: function () {},
          })
           uni.setStorage({
            key: 'phoneNum',
            data: this.loginForm.phone,
            success: function () {},
          })
          
          if (this.roleId === 4) {
            uni.redirectTo({
               url: '/pagesA/leader-daily/daily-view-detail/daily-list'
            })
          }
          if (this.roleId === 3) {
            uni.switchTab({
              url: '/pages/secretary-daily/daily-edit-home/index',
            })
          }
          if (this.roleId === 2) {
            uni.switchTab({
              url: '/pages/leader-daily/daily-edit-home/index',
            })
          }
          if (this.roleId === 1) {
            uni.switchTab({
              url: '/pages/summary-daily/summary-home/index',
            })
          }
        }
      } else {
        uni.showToast({
          title: "您无权登录系统，请联系管理员！",//JSON.stringify(verifPhone),
          type: 'default',
          position: 'bottom',
          icon: 'none',
          position: 'center',
          mask: true,
          duration: 3000,
        })
      }
    },
    async handleGetPhoneCode() {
      if (!this.loginForm.phone) {
        uni.showToast({
          title: '请输入手机号',
          type: 'default',
          position: 'bottom',
          icon: 'none',
          position: 'center',
          mask: true,
          duration: 3000,
        })
      } else {
        const phoneReg = this.phoneNumberStyle()
        const verifPhone = await verificationPhone({
          phonenumber: this.loginForm.phone,
        }) 
        if(verifPhone.data.loginCount>=5){
           wx.showModal({
             title: '提示',
             content: '今日次数已用完，请明天再试',
           })
          return 
        }   
        if (phoneReg && verifPhone.data) {
          getPhoneCode({
            phone: this.loginForm.phone,
            smsType: 1002,
          }).then(() => {
            this.handleTimer()
          })
        } else {
          uni.showToast({
            title: '您无权登录系统，请联系管理员',
            type: 'default',
            position: 'bottom',
            icon: 'none',
            position: 'center',
            mask: true,
            duration: 3000,
          })
        }
      }
    },
    // 用于校验手机号码格式是否正确
    phoneNumberStyle() {
      let reg = /^1[3456789]\d{9}$/
      if (!reg.test(this.loginForm.phone)) {  
        return false
      }
      else return true
    },
    handleTimer() {
      const timeDate = setInterval(() => {
        this.timer--
        this.codeBtnTxt = this.timer + '秒重发'
        this.showBtnOn = true //time==0 时，倒计时结束，按钮切换为原来的颜色，清除定时器
        if (this.timer == 0) {
          clearInterval(timeDate)
          this.codeBtnTxt = '获取验证码'
          this.showBtnOn = false
          this.timer=60
        }
      }, 1000)
    },
  },
}
</script>

<style lang="scss" scoped>

.topImg {
}
.main-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
}
.login-form {
  padding: 30rpx;
}
.containerBody {
  height: 830rpx;
  position: relative;
  margin: 600rpx 30rpx 30rpx 30rpx;
  box-sizing: border-box;
  border: 2rpx solid #ddd;
  z-index: 2;
  border-radius: 20rpx;
  background: #fff;
}
.login-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
}
.login-btn-box {
  display: flex;
  margin-top: 100rpx;
}
.custom-style {
  width: 100%;
  height: 90rpx;
  border: 1rpx solid #0c347e;
  border-radius: 15rpx;
  font-size: 36rpx;
}
.img-container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 700rpx;
}
.bottomImg {
  width: 100%;
  height: 126rpx;
  position: absolute;
  bottom: -6rpx;
}
</style>
